<script>
import { ref, reactive, computed, watch } from 'vue'
export default {
  setup () {
    const num = ref(1)
    const user = reactive({
      age: 18
    })
    const user2 = ref({
      age2: 18
    })
    const btn = () => {
      num.value += 2
      user.age += 2
      user2.value.age2 += 10
    }

    const newNum = computed(() => {
      return num.value + 5
    })
    /* 写法1：简单数据类型 */
    // watch(num, (newVal, oldVal) => {
    //   console.log(newVal, oldVal);
    // }, {
    //   //deep:true
    //   immediate: true
    // })
    /* 写法2 复杂数据类型*/
    // watch(user, (newVal) => {
    //   console.log(newVal);
    // })
    // watch(user2, (newVal) => {
    //   console.log(newVal);
    // }, {
    //   deep: true
    // })
    /* 写法3函数写法监听 */
    // watch(() => user.age, (newVal, oldVal) => {
    //   console.log(newVal, oldVal);
    // })

    /* 写法4：多个一起监听 */
    // watch([num, user], (newVal, oldVal) => {
    //   console.log(newVal, oldVal);
    // })

    return { num, btn, user, newNum, user2 }
  }
}
</script>
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3===={{ num }}==={{ user.age }}==={{ newNum }}==={{ user2.age2 }}
    <button @click="btn">按钮</button>
  </div>
</template>
<style lang='less'  scoped>
</style>